<template>
  <div class="detailsContainer">
	<div class="detailsImg">
		<router-link :to="{path:'/amuse/movie/movieDelivery',query:{movieType:bookMess.type}}"><img src="../../../../static/img/white_left.png"></router-link>
		<span>电影</span>
		<p><img :src="bookMess.data"></p>
	</div>

	<div class="detailsMess">
		<p class="num">
		 <span>	<img src="../../../../static/img/good.png">{{bookMess.good}}</span>
		 <span><img src="../../../../static/img/low.png">{{bookMess.low}}</span>
		</p>
		<p>{{bookMess.title}}</p>
		<p>
			<span v-for="type in bookMess.types">{{type.type}}/
			</span>
		</p>

		<p>上映时间：{{bookMess.time}}</p>

		<p class="shop">选座购买<router-link :to="{path:'/payment',query:{bookMess:bookMess.name,type:false}}" tag="span">¥23起<img src="../../../../static/img/right.png"></router-link></p>
		<div class="smallIntro">
			<p>简介</p>
			<p class="smallFont" >{{flag?substrFont:bookMess.summary}}</p>
			<img src="../../../../static/img/buttom.png" class="select" @click="toSelect">
		</div>
        <div class="smallImg">
        	<img src="../../../../static/img/movie30.png">
        	<img src="../../../../static/img/movie31.png">
        	<img src="../../../../static/img/movie32.png">
        	<img src="../../../../static/img/movie33.png">
        </div>
	</div>
  </div>	
</template>
<script type="text/javascript">
import getUrl from '../../../utils/getUrl.js';
	export default{
		name:'details',
		data(){
			return{
				flag:true,
				bookMess:'',
				shopping:true
			}
		},
		computed:{
			  substrFont(){
			  	   	if(this.bookMess.summary.length>40){
			  	   	  return this.bookMess.summary.substr(0,60)+'...'
			  	   }
			  }
		},
		methods:{
			 toSelect(){
			 	this.flag=!this.flag;
			 }
		},
		created(){
			this.$axios.get(getUrl.getMovie()).then(res=>{
				   var newBooks=res.data;
				   for(var j in newBooks){
				   for(var i in newBooks[j]){
				   	    if(newBooks[j][i]['name']==this.$route.query.bookMess){
				   	    	this.bookMess=newBooks[j][i];
				   	    }

				   }
				   }
                     if(this.bookMess['type']=='magain'){
                        	 this.shopping=false;
                        }
			})
		}



	}
</script>
<style lang="less" scoped>
      .detailsContainer{height:1600/75rem;
      }
	  .detailsImg{
	  	img{width:30/75rem;height:50/75rem;}
	  	background:#3D3D3D;color:white;height:633/75rem;
	  	span{margin-left:250/75rem;display:inline-block;width: 88/75rem;
	  	height: 88/75rem;
	  	}
	  	img{margin:30/75rem 0 0 30/75rem;}
	  	p{margin:0 auto;width: 365/75rem;height: 503/75rem;
	  		img{width: 305/75rem;height: 443/75rem;}
	  	}
	  }
	  .detailsMess{
	  	width:9rem;margin:0 auto;overflow:hidden;
	  	.num{float:right;}
	  	.shop{margin:25/75rem 0;overflow:hidden;height:55/75rem;line-height:55/75rem;
	  		  span{float:right;
                  img{width:28/75rem;height:28/75rem;margin-left:15/75rem;vertical-align:middle;}
	  		   }
	  	     }
	  	 p{margin-top:20/75rem;font-size:25/75rem;
           span{
           	 img{margin-right:10/75rem;width:50/75rem;height:50/75rem;vertical-align: middle;}
           }
	  	 }
	  	 p:nth-child(2){margin-top:43/75rem;font-size:35/75rem;}
	  	 .smallFont{font-size:25/75rem;line-height:40/75rem;
	  	   }
	  	 .blueFont{color:#5483C2;float:right;
	  	 	        img{margin-left:20/75rem;margin-bottom: 8/75rem;vertical-align: middle;}
	  	          }
	  	  .smallIntro{
	  	  	margin-top:20/75rem;
	  	  	.select{margin:0/75rem 0 0 650/75rem;float:right;width:26/75rem;}
	  	  }  
	  	  .smallImg{
	  	  	margin-top:38/75rem;
	  	  	img{width:160/75rem;height:242/75rem;}
	  	  }      
	  	          
	  }
</style>